<template>
  <div class="list-todos">
    <a v-for="item in items" class="list-todo list activeListClass">
      <span class="icon-lock" v-if="item.locked"></span>
      <span class="count-list" v-if="item.count > 0">{{ item.count }}</span>
      {{ item.title }}
    </a>
    <a href="" class="link-list-new">
      <span class="icon-plus"></span>
      Add
    </a>
  </div>
</template>

<script>
  export default {
    name: "Menus",
    data() {
      return {
        items: [
          {
            title: 'work',
            count: 2,
            locked: true
          },
          {
            title: 'holiday',
            count: 1,
            locked: false
          },
          {
            title: 'learn',
            count: 3,
            locked: false
          }
        ]
      }
    },
  }
</script>

<style lang="less">
  @import "../common/style/menu.less";
</style>
